/**
 * 3d轮播图
 * @param elem
 * @param options
 * @constructor
 */

function Carousel(elem, options) {
    // curDisplay 当前播放第几个（0为第一个）
    // autoPlay 是否开启自动轮播
    // interval 自动轮播间隔时间
    this.defaults = { curDisplay: 0, autoPlay: false, interval: 3000 }; // 默认配置
    this.opts = $.extend({}, this.defaults, options); // 在jQuery命名空间上增加两个函数

    let self = this;

    // 创建元素-start
    let mainBox = '<div class="carousel">';
    this.opts.data.forEach(function (item) {
        let listArr = '';
        if (item.list) {
            item.list.split(',').forEach(function(i) {
                listArr += `<li>${i} </li>`;
            });
        }
        mainBox += `<div class="item">
                        <img src="${item.imgUrl}" alt="">
                        <p class="name">${item.name}</p>
                        <p class="listTitle">主持频道</p>
                        <ul class="list">${listArr}</ul>
                    </div>`;
    });

    mainBox += '</div>';
    // 放入轮播进步点
    elem.append(mainBox);

    // 创建元素-end
    this.$carousel = elem.find('.carousel');    // 轮播实例

    this.$aImg = this.$carousel.find('.item');    // 需要轮播的元素

    this.imgLen = this.$aImg.length;            // 轮播图数量

    this.curDisplay = this.opts.curDisplay;
    this.autoPlay = this.opts.autoPlay;

    this.viewWidth = this.$carousel.width() / 2;     // 视图宽度
    this.b_switch = true;                       // 切换
    this.iNow = this.opts.curDisplay;           // 当前播放第几个
    this.timer = null;                          // 计时器
    this.interval = this.opts.interval;         // 间隔时间

    this.inital();
}

Carousel.prototype = {
    play: function () {
        if (this.autoPlay) {
            if (this.iNow === this.imgLen - 1) {
                this.iNow = 0;
            } else {
                this.iNow++;
            }

            this.movingNext(this.iNow);
        }
    },

    movingPrev: function (index) {
        this.curDisplay = index;

        this.initalCarousel();
    },

    movingNext: function (index) {
        this.curDisplay = index;
        this.initalCarousel();
    },

    // 执行渲染
    initalCarousel: function () {
        let self = this;
        let half_imgLen = Math.floor(this.imgLen / 2);
        let leftNum;
        let rightNum;

        let k = 0;
        for (let i = 0; i < half_imgLen; i++) {
            leftNum = this.curDisplay - i - 1;
            if (k === 0) {
                this.$aImg.eq(leftNum).stop().css({
                    transform: 'translateX(' + (-262 * (i + 1)) + 'px) translateZ(-100px) rotateY(-36deg)'
                }).animate({
                    opacity: '0.45'
                }, 200);
                this.$aImg.eq(leftNum).attr('onclick', null);

                rightNum = this.curDisplay + i + 1;
                if (rightNum > this.imgLen - 1) rightNum -= this.imgLen;
                this.$aImg.eq(rightNum).stop().css({
                    transform: 'translateX(' + (262 * (i + 1)) + 'px) translateZ(-100px) rotateY(36deg)'
                }).animate({
                    opacity: '0.45'
                }, 200);
                this.$aImg.eq(rightNum).attr('onclick', null);
                k++;
            } else {
                this.$aImg.eq(leftNum).stop().css({
                    transform: 'translateX(0px) translateZ(-1000px) rotateY(30deg)',
                    opacity: 0
                });

                rightNum = this.curDisplay + i + 1;
                if (rightNum > this.imgLen - 1) rightNum -= this.imgLen;
                this.$aImg.eq(rightNum).stop().css({
                    transform: 'translateX(0px) translateZ(-1000px) rotateY(-30deg)',
                    opacity: 0
                });
            }
            this.$aImg.removeClass('on');
        }

        // 绑定的跳转链接
        this.$aImg.eq(this.curDisplay).stop().css({
            transform: 'translateZ(0px)'
        }).animate({
            opacity: '1',
        }, 200).addClass('on').attr('onclick', null);

        this.$carousel.on('webkitTransitionEnd', function () {
            self.b_switch = true;
        });
    },

    inital: function () {
        let self = this;

        this.initalCarousel();

        this.$aImg.on('click', function (ev) {
            if (self.b_switch && !$(this).hasClass('on')) {
                self.iNow = $(this).index();
                self.b_switch = false;

                let direction = self.viewWidth < ev.clientX ? 'next' : 'prev';
                let index = $(this).index();

                if (direction === 'next') {
                    self.movingNext(index);
                } else {
                    self.movingPrev(index);
                }
            }
        }).hover(function () {
            clearInterval(self.timer);
        }, function () {
            self.timer = setInterval(function () {
                self.play();
            }, self.interval);
        });

        this.timer = setInterval(function () {
            self.play();
        }, this.interval);

        this.$carousel.on('selectstart', function () {
            return false;
        });
    },

    constructor: Carousel
};


this.Carousel = new Carousel(this.getContainer().find('.carousel3d_box'), {
    curDisplay: 0,
    autoPlay: true,
    interval: 5000,
    data: data
});


